@import "~scss/variables";

$sw-select-result-active-color-background: lighten($color-shopware-brand-500, 40%);
$sw-select-result-active-color-text: $color-shopware-brand-500;
$sw-select-result-color-border: $color-gray-300;
$sw-select-result-color-icon: darken($color-gray-100, 20%);
$sw-select-result-transition-item-icon: all ease-in-out 0.15s;
$sw-select-result-disabled-color-background: $color-gray-100;
$sw-select-result-disabled-color-text: darken($color-gray-300, 15%);

.sw-select-result {
    padding: 12px 15px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "a b c d";
    align-items: center;
    border-radius: 4px;

    .sw-select-result__result-item-preview {
        order: 1;
        margin-right: 10px;
        display: block;
        grid-area: a;

        &:empty {
            margin-right: 0;
        }
    }

    .sw-select-result__result-item-text {
        max-width: 100%;
        word-break: break-word;
        display: flex;
        flex-direction: column;
        color: $color-darkgray-200;
        order: 2;
        overflow: hidden;
        grid-area: b;
    }

    .sw-select-result__result-item-checkmark {
        width: 16px;
        height: 16px;
        padding-top: 4px;
        padding-right: 2px;
        padding-bottom: 3px;
        padding-left: 2px;
    }

    &.is--active {
        background: $sw-select-result-active-color-background;
        color: $sw-select-result-active-color-text;

        .sw-select-result__result-item-text {
            color: $sw-select-result-active-color-text;
        }
    }

    .sw-select-result__result-item-description {
        width: 100%;
        color: $color-gray-600;
        order: 3;
        line-height: 14px;
        padding: 0 0 0 8px;
        grid-area: c;
    }

    > .mt-icon {
        color: $sw-select-result-color-icon;
        margin-left: 10px;
        order: 4;
        justify-self: end;
        grid-area: d;
    }

    &.is--description-bottom {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "a b d"
            "c c c";

        .sw-select-result__result-item-description {
            grid-column-start: 1;
            padding: 8px 0 0;
            order: 3;

            &:empty {
                padding: 0;
            }
        }

        .mt-icon {
            order: 2;
        }
    }

    &.is--description-left {
        grid-template-columns: 2fr 7fr 2fr;
        grid-template-areas:
            "a b d"
            "c c c";

        .sw-select-result__result-item-text {
            grid-area: a;
        }

        .sw-select-result__result-item-description {
            grid-area: b;
            padding: 0;
        }
    }

    &.is--disabled {
        color: $sw-select-result-disabled-color-text;

        &.is--active {
            background: $sw-select-result-disabled-color-background;
            color: $sw-select-result-disabled-color-text;
            cursor: default;
        }

        .sw-highlight-text__highlight {
            color: $sw-select-result-disabled-color-text;
        }

        .sw-select-result__result-item-text {
            color: $sw-select-result-disabled-color-text;
        }
    }

    &:last-child {
        border-bottom: 0 none;
    }

    // Vue.js transitions
    .sw-select-result-appear-enter-active,
    .sw-select-result-appear-leave-active {
        transition: $sw-select-result-transition-item-icon;
        transform: translateY(0);
    }

    .sw-select-result-appear-enter,
    .sw-select-result-appear-leave-to {
        opacity: 0;
        transform: translateY(-15px);
    }
}
